<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带登录注册和文章栏目展示的社交网站顶部</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 通用样式 */
        .header-demo {
            margin-bottom: 3rem;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .header-demo h3 {
            padding: 1rem;
            background-color: #f8f9fa;
            margin: 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .nav-container {
            transition: all 0.3s ease;
        }
        
        .nav-link {
            position: relative;
            transition: all 0.2s ease;
        }
        
        .auth-buttons .btn {
            transition: all 0.2s ease;
        }
        
        .category-pill {
            transition: all 0.2s ease;
        }
        
        .category-pill:hover {
            transform: translateY(-2px);
        }
        
        /* 样式1：简约资讯风 */
        .style-1 .top-bar {
            background-color: #f8f9fa;
            padding: 0.5rem 0;
            border-bottom: 1px solid #eaeaea;
        }
        
        .style-1 .main-nav {
            background-color: white;
            padding: 0.75rem 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .style-1 .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #2563eb;
        }
        
        .style-1 .nav-link {
            color: #4b5563 !important;
        }
        
        .style-1 .nav-link:hover {
            color: #2563eb !important;
        }
        
        .style-1 .category-pill {
            background-color: #eff6ff;
            color: #2563eb;
        }
        
        .style-1 .category-pill:hover {
            background-color: #dbeafe;
        }
        
        /* 样式2：深色阅读风 */
        .style-2 .top-bar {
            background-color: #1e293b;
            padding: 0.5rem 0;
            color: #e2e8f0;
        }
        
        .style-2 .main-nav {
            background-color: #0f172a;
            padding: 0.75rem 0;
        }
        
        .style-2 .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #93c5fd;
        }
        
        .style-2 .nav-link {
            color: #e2e8f0 !important;
        }
        
        .style-2 .nav-link:hover {
            color: #93c5fd !important;
        }
        
        .style-2 .search-input {
            background-color: #1e293b;
            border-color: #334155;
            color: white;
        }
        
        .style-2 .search-input:focus {
            background-color: #1e293b;
            border-color: #60a5fa;
            color: white;
        }
        
        .style-2 .category-pill {
            background-color: #1e293b;
            color: #93c5fd;
            border: 1px solid #334155;
        }
        
        .style-2 .category-pill:hover {
            background-color: #334155;
        }
        
        /* 样式3：专业专栏风 */
        .style-3 .top-bar {
            background-color: white;
            padding: 0.5rem 0;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .style-3 .main-nav {
            background-color: white;
            padding: 1rem 0;
            border-bottom: 2px solid #0f172a;
        }
        
        .style-3 .logo {
            font-size: 1.4rem;
            font-weight: 700;
            color: #0f172a;
        }
        
        .style-3 .nav-link {
            color: #0f172a !important;
            font-weight: 500;
            margin: 0 0.5rem;
        }
        
        .style-3 .nav-link:hover {
            color: #475569 !important;
        }
        
        .style-3 .category-pill {
            background-color: white;
            color: #0f172a;
            border: 1px solid #e5e7eb;
        }
        
        .style-3 .category-pill:hover {
            background-color: #f8fafc;
            border-color: #cbd5e1;
        }
        
        .style-3 .auth-buttons .btn {
            text-transform: uppercase;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        /* 样式4：活力社区风 */
        .style-4 .top-bar {
            background: linear-gradient(90deg, #8b5cf6, #ec4899);
            padding: 0.5rem 0;
            color: white;
        }
        
        .style-4 .main-nav {
            background-color: white;
            padding: 0.75rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .style-4 .logo {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(90deg, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .style-4 .nav-link {
            color: #475569 !important;
        }
        
        .style-4 .nav-link:hover {
            color: #8b5cf6 !important;
        }
        
        .style-4 .category-pill {
            background-color: #f3e8ff;
            color: #7c3aed;
        }
        
        .style-4 .category-pill:hover {
            background-color: #e9d5ff;
        }
        
        .style-4 .auth-buttons .btn-primary {
            background: linear-gradient(90deg, #8b5cf6, #ec4899);
            border: none;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .nav-items, .category-container, .auth-buttons {
                margin-top: 1rem;
            }
            
            .search-container {
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
            }
            
            .category-scroll {
                overflow-x: auto;
                padding-bottom: 0.5rem;
            }
            
            .category-scroll .d-flex {
                min-width: max-content;
            }
        }
    </style>
</head>
<body class="p-4">
    <div class="container">
        <h2 class="text-center mb-5">带登录注册和文章栏目展示的社交网站顶部</h2>
        
        <!-- 样式1：简约资讯风 -->
        <div class="header-demo style-1">
            <h3>样式1：简约资讯风</h3>
            <div class="nav-container">
                <!-- 顶部栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div>
                            <span class="me-3"><i class="fas fa-calendar-alt me-1"></i> 2023年10月15日</span>
                            <span><i class="fas fa-user me-1"></i> 欢迎访问资讯社交平台</span>
                        </div>
                        <div class="d-flex gap-3">
                            <a href="#" class="text-dark hover:text-primary"><i class="fas fa-sun"></i></a>
                            <a href="#" class="text-dark hover:text-primary"><i class="fas fa-bell"></i></a>
                        </div>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-newspaper me-2"></i>InfoSocial
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle1">
                                <i class="fas fa-bars"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle1">
                                <!-- 主导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-bookmark me-1"></i> 收藏</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-user-friends me-1"></i> 关注</a>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3 d-none d-md-block">
                                    <div class="input-group">
                                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索文章、用户...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 登录注册按钮 -->
                                <div class="auth-buttons d-flex gap-2">
                                    <button class="btn btn-outline-primary rounded-pill">
                                        登录
                                    </button>
                                    <button class="btn btn-primary rounded-pill">
                                        注册
                                    </button>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                
                <!-- 文章栏目分类 -->
                <div class="category-container bg-white py-3 border-bottom">
                    <div class="container">
                        <div class="category-scroll">
                            <div class="d-flex gap-2 align-items-center">
                                <span class="font-medium">文章分类:</span>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-globe me-1"></i>全球资讯
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-laptop-code me-1"></i>科技前沿
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-book me-1"></i>读书分享
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-briefcase me-1"></i>职场经验
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-utensils me-1"></i>美食探店
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-plane me-1"></i>旅行日记
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-paint-brush me-1"></i>艺术文化
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-ellipsis-h"></i>更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式2：深色阅读风 -->
        <div class="header-demo style-2">
            <h3>样式2：深色阅读风</h3>
            <div class="nav-container">
                <!-- 顶部栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div>
                            <span class="me-3"><i class="fas fa-star me-1"></i> 今日精选文章 24 篇</span>
                            <span><i class="fas fa-eye me-1"></i> 总阅读量 125,890</span>
                        </div>
                        <div class="d-flex gap-3">
                            <a href="#" class="text-light hover:text-primary"><i class="fas fa-moon"></i></a>
                            <a href="#" class="text-light hover:text-primary"><i class="fas fa-cog"></i></a>
                        </div>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-book-reader me-2"></i>NightRead
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle2">
                                <i class="fas fa-bars text-white"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle2">
                                <!-- 主导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-fire me-1"></i> 热门</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-clock-rotate-left me-1"></i> 历史</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-list me-1"></i> 专栏</a>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3 d-none d-md-block">
                                    <div class="input-group">
                                        <input type="text" class="form-control search-input rounded-pill border-right-0" placeholder="搜索文章...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0 text-white" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 登录注册按钮 -->
                                <div class="auth-buttons d-flex gap-2">
                                    <button class="btn btn-outline-light rounded-pill">
                                        登录
                                    </button>
                                    <button class="btn btn-primary rounded-pill">
                                        免费注册
                                    </button>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                
                <!-- 文章栏目分类 -->
                <div class="category-container bg-slate-900 py-3 border-bottom border-slate-800">
                    <div class="container">
                        <div class="category-scroll">
                            <div class="d-flex gap-2 align-items-center">
                                <span class="font-medium">内容分类:</span>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-pen me-1"></i>散文随笔
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-lightbulb me-1"></i>思想观点
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-brain me-1"></i>认知提升
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-bolt me-1"></i>科技评论
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-university me-1"></i>财经分析
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-heart me-1"></i>情感故事
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-ellipsis-h"></i>全部分类
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式3：专业专栏风 -->
        <div class="header-demo style-3">
            <h3>样式3：专业专栏风</h3>
            <div class="nav-container">
                <!-- 顶部栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div>
                            <span class="me-4"><i class="fas fa-trophy me-1"></i> 专栏作者招募中</span>
                            <span><i class="fas fa-calendar-check me-1"></i> 下一期截稿日期：10月30日</span>
                        </div>
                        <div class="d-flex gap-4">
                            <a href="#" class="text-dark hover:text-gray-600">关于我们</a>
                            <a href="#" class="text-dark hover:text-gray-600">作者中心</a>
                            <a href="#" class="text-dark hover:text-gray-600">帮助</a>
                        </div>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-feather-alt me-2"></i>ProColumns
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle3">
                                <i class="fas fa-bars"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle3">
                                <!-- 主导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#">首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">专栏</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">作者</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">专题</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">活动</a>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3 d-none d-md-block">
                                    <div class="input-group">
                                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索专栏或作者...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 登录注册按钮 -->
                                <div class="auth-buttons d-flex gap-2">
                                    <button class="btn btn-outline-primary rounded-pill">
                                        登录
                                    </button>
                                    <button class="btn btn-primary rounded-pill">
                                        注册账号
                                    </button>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                
                <!-- 文章栏目分类 -->
                <div class="category-container bg-white py-3 border-bottom">
                    <div class="container">
                        <div class="category-scroll">
                            <div class="d-flex gap-2 align-items-center">
                                <span class="font-medium">专栏分类:</span>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-laptop me-1"></i>互联网
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-chart-line me-1"></i>商业分析
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-pencil me-1"></i>创意写作
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-graduation-cap me-1"></i>教育研究
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-flask me-1"></i>科学探索
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-palette me-1"></i>设计美学
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-chevron-right"></i>更多分类
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式4：活力社区风 -->
        <div class="header-demo style-4">
            <h3>样式4：活力社区风</h3>
            <div class="nav-container">
                <!-- 顶部栏 -->
                <div class="top-bar">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-3">
                            <span class="px-3 py-1 rounded-full bg-white/20"><i class="fas fa-gift me-1"></i> 新用户福利</span>
                            <span>完成新手任务领积分</span>
                        </div>
                        <div class="d-flex gap-3">
                            <a href="#" class="hover:text-white"><i class="fas fa-ranking-star"></i> 排行榜</a>
                            <a href="#" class="hover:text-white"><i class="fas fa-trophy"></i> 活动中心</a>
                        </div>
                    </div>
                </div>
                
                <!-- 主导航栏 -->
                <div class="main-nav">
                    <div class="container">
                        <nav class="navbar navbar-expand-lg">
                            <!-- Logo -->
                            <a class="navbar-brand logo" href="#">
                                <i class="fas fa-comment-dots me-2"></i>CommunityHub
                            </a>
                            
                            <!-- 移动端菜单按钮 -->
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStyle4">
                                <i class="fas fa-bars"></i>
                            </button>
                            
                            <!-- 导航内容 -->
                            <div class="collapse navbar-collapse" id="navbarStyle4">
                                <!-- 主导航链接 -->
                                <ul class="navbar-nav me-auto nav-items">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 探索</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-users me-1"></i> 小组</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#"><i class="fas fa-message me-1"></i> 讨论</a>
                                    </li>
                                </ul>
                                
                                <!-- 搜索框 -->
                                <div class="search-container me-3 d-none d-md-block">
                                    <div class="input-group">
                                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索话题、帖子...">
                                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 登录注册按钮 -->
                                <div class="auth-buttons d-flex gap-2">
                                    <button class="btn btn-outline-primary rounded-pill">
                                        登录
                                    </button>
                                    <button class="btn btn-primary rounded-pill">
                                        注册
                                    </button>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                
                <!-- 文章栏目分类 -->
                <div class="category-container bg-white py-3 border-bottom">
                    <div class="container">
                        <div class="category-scroll">
                            <div class="d-flex gap-2 align-items-center">
                                <span class="font-medium">热门话题:</span>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-fire me-1"></i>每日热议
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-music me-1"></i>音乐分享
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-film me-1"></i>影视评论
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-gamepad me-1"></i>游戏讨论
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-book-open me-1"></i>读书交流
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-code me-1"></i>编程技术
                                </a>
                                <a href="#" class="category-pill badge rounded-pill px-3 py-1 text-decoration-none">
                                    <i class="fas fa-plus-circle me-1"></i>创建话题
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化导航栏交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为每个激活的导航链接添加特殊样式
            document.querySelectorAll('.nav-link.active').forEach(link => {
                if (link.closest('.style-1')) {
                    link.classList.add('text-primary');
                } else if (link.closest('.style-2')) {
                    link.classList.add('text-primary');
                } else if (link.closest('.style-3')) {
                    link.classList.add('text-dark', 'border-bottom', 'border-dark');
                } else if (link.closest('.style-4')) {
                    link.classList.add('text-purple-600', 'font-bold');
                }
            });
        });
    </script>
</body>
</html>
    